<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show</title>
    <style>
        #page-create {
            width: 1000px;
            height: 20px;
            text-align: center;
            padding: 10px;
            background-color: #5cb85c;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="main" style="width: 1000px;height:400px;"></div>
    <hr>
    <div id="sugar" style="width: 1000px;height:400px;"></div>
    <div id="page-create" onclick="pageToCreate()">增加记录</div>
</body>
</html>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
<script>
    const myChart = echarts.init(document.getElementById('main'));

    const sugarChart = echarts.init(document.getElementById('sugar'));

    const getKeys = (arr, key) => arr.map(obj => obj[key]);

    const pageToCreate = () => {
        window.location = './create.html';
    };

    (async () => {
        let response = await fetch('http://finder.lyhsnd.cn/record_health_list');
        let responseData = await response.json();
        console.log(responseData)
        let records = responseData.data;
        let xAxisData = getKeys(records, 'record_time');
        console.log(xAxisData)
        let option = {
            title: {
                text: 'Health Record - Blood Pressure'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Blood Pressure High', 'Blood Pressure Low', 'Blood Sugar', 'Heart Rate',]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxisData, // time from server
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Blood Pressure High',
                    type: 'line',
                    // stack: 'Total',
                    data: getKeys(records, 'blood_pressure_high'),
                },
                {
                    name: 'Blood Pressure Low',
                    type: 'line',
                    // stack: 'Total',
                    data: getKeys(records, 'blood_pressure_low'),
                },
                // {
                //     name: 'Blood Sugar',
                //     type: 'line',
                //     stack: 'Total',
                //     data: getKeys(records, 'blood_sugar'),
                // },
                {
                    name: 'Heart Rate',
                    type: 'line',
                    // stack: 'Total',
                    data: getKeys(records, 'heart_rate'),
                },
            ]
        };
        myChart.setOption(option);

        let sugarResponse = await fetch('http://finder.lyhsnd.cn/record_sugar_list');
        let sugarResponseData = await sugarResponse.json();
        let sugarRecords = sugarResponseData.data;

        let sugarOption = {
            title: {
                text: 'Health Record - Blood Sugar'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Blood Sugar',]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: getKeys(sugarRecords, 'record_time'), // time from server
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Blood Sugar',
                    type: 'line',
                    data: getKeys(sugarRecords, 'blood_sugar'),
                },
            ]
        };
        sugarChart.setOption(sugarOption);
    })();
</script>